<template>
  <div class="popup-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>小采灵犀智能对账助手</span>
        </div>
      </template>
      <div class="content">
        <div class="status-info">
          <el-tag type="success" effect="dark">运行中</el-tag>
          <span class="status-text">插件状态: {{ pluginStatus }}</span>
        </div>
        
        <div class="stats-grid">
          <div class="stat-item">
            <div class="stat-label">今日采集</div>
            <div class="stat-value">{{ stats.todayCount }}</div>
          </div>
          <div class="stat-item">
            <div class="stat-label">数据总量</div>
            <div class="stat-value">{{ stats.totalCount }}</div>
          </div>
          <div class="stat-item">
            <div class="stat-label">待同步</div>
            <div class="stat-value">{{ stats.pendingCount }}</div>
          </div>
        </div>
        
        <div class="actions">
          <div>
          <el-button type="primary" @click="openOptions" icon="FolderOpened" style="width: 100%; margin-bottom: 10px;">
            打开管理面板
          </el-button>
          </div>
          <div>
          <el-button type="success" @click="syncData" icon="Refresh" style="width: 100%;">
            立即同步
          </el-button>
          </div>
        </div>
        
        <div class="recent-data" v-if="recentData.length > 0">
          <div class="recent-title">📝 最近拦截</div>
          <div class="recent-list">
            <div v-for="(item, index) in recentData" :key="index" class="recent-item">
              <span class="time">{{ item.time }}</span>
              <span class="source" :class="item.type">{{ item.source }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { ElCard, ElButton, ElTag } from 'element-plus'
import { FolderOpened, Refresh } from '@element-plus/icons-vue'
import { usePopupData } from '../options/composables/usePopupData'

const {
  stats,
  recentData,
  pluginStatus,
  syncData,
  initPopupData,
  cleanup
} = usePopupData()

const openOptions = () => {
  // 在实际的 Chrome 扩展中，这里会使用 chrome.tabs.create 或类似 API
  console.log('打开管理面板')
  chrome.runtime.openOptionsPage()
}

onMounted(() => {
  initPopupData()
})

onUnmounted(() => {
  cleanup()
})
</script>

<style scoped>
.popup-container {
  width: 350px;
  min-height: 300px;
  padding: 0;
}

.box-card {
  width: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content {
  padding: 10px 0;
}

.status-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.status-text {
  font-size: 14px;
  color: #666;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.stat-item {
  text-align: center;
}

.stat-label {
  font-size: 12px;
  color: #999;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #409eff;
}

.actions {
  margin-bottom: 20px;
}

.recent-data {
  background: #f5f7fa;
  border-radius: 8px;
  padding: 10px;
}

.recent-title {
  font-size: 12px;
  color: #999;
  margin-bottom: 10px;
}

.recent-list {
  max-height: 150px;
  overflow-y: auto;
}

.recent-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 12px;
  border-bottom: 1px solid #eee;
}

.recent-item:last-child {
  border-bottom: none;
}

.time {
  color: #999;
  white-space: nowrap;
  min-width: 90px;
}

.source {
  font-weight: 500;
  flex: 1;
  text-align: right;
  margin-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.source.bank {
  color: #409eff;
}

.source.order {
  color: #67c23a;
}

.source.announcement {
  color: #e6a23c;
}
</style>